<template>
  <div>
    <div class="main"></div>
  </div>
</template>
<script>
import { findLastByWorkstationId } from "@/api/modules/workstation";
var echarts = require("echarts");
export default {
  // props:[],
  props: {
    ScoreType: {
      type: String,
      default: "",
    },
    totalScore: {
      type: String,
      default: "",
    },
  },
  // 页面加载
  created() {

    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      data: {},
    };
  },
  // 方法
  methods: {
    getList() {
      findLastByWorkstationId({
        params: {
         workstationId: sessionStorage.getItem("workId"),
        },
      }).then((res) => {
        this.data = res.data;
        // this.tableData = res.data.foodSafetyIndexItemResponseList;
        this.$nextTick(() => {
          this.meterInit();
          //   this.radarInit();
        });
      });
    },

    meterInit() {
      var chartDom = document.querySelector(".main");
      var myChart = echarts.init(chartDom);

      //   ScoreType
      let option = {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 20,
                color: [[this.data[this.ScoreType]/this.data[this.totalScore], "#1890ff"],[1,"#d7d2d1"]],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -20,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              distance: -35,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            min: 0, //最小值
            max: this.data[this.totalScore], //最大值
            axisLabel: {
              color: "auto",
              distance: 30,
              fontSize: 15,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: this.data[this.ScoreType],
              },
            ],
            center: ["50%", "50%"],
            radius: "90%",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.main {
  height: 220px;
  width: 100%;
}
</style>